﻿<!DCOTYPE  html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>流量热力图</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="/css/theme/font-awesome.min.css" type="text/css" />
    <link rel="stylesheet" href="/css/theme/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="/javascript/theme/libs/jquery-easyui-1.4/themes/default/easyui.css" type="text/css" />
    <link rel="stylesheet" href="/css/theme/App.css" type="text/css" />
    <link rel="stylesheet" href="/css/theme/custom.css" type="text/css" />
    <script src="/javascript/theme/libs/jquery-1.9.1.min.js"></script>
    <script src="/javascript/theme/libs/jquery-easyui-1.4/jquery.easyui.min.js"></script>
    <script src="/javascript/theme/libs/bootstrap.min.js"></script>
    <script src="/javascript/theme/App.js"></script>
    <script type="text/javascript" src="/javascript/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="/javascript/report/FusionCharts.js"></script>
    <script src="/javascript/theme/libs/echarts/js/esl.js"></script>
    <style type="text/css">
            .alink {
            text-decoration:underline;
            color:#0000CC;
            }
            .alinkClicked {
            color:#0000CC;
            }
            #cates,#locals,#cateClean,#localClean{
            display:none;
            }
            div{background:white;}
        </style>
</head>
<body>
    <div id="content" style="OVERFLOW-X:yes;OVERFLOW-Y:auto;min-height:100px">
        <div id="content-container">
            <form action="/heatmap/getMapPage" class="form-horizontal" role="form" method="post" target="_self" id="selectform">
                <div class="portlet">
                    <div class="portlet-header">
                        <h3> <i class="fa fa-tasks"></i>
                            流量热力图
                        </h3>
                    </div>
                    <!-- /.portlet-header -->
                    <div class="portlet-content"></br>
                    <div class="form-group">
                        <label class="col-md-2">&nbsp;&nbsp;日 期 :</label>
                        <div class="col-md-2">
                            <input  type="text" name="startdate" id="startdate" value="$!{startdate}" style="width:120px;height:25px" class="Wdate form-control" value="$!{sendTime}" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-#{%d-1}'})"/>
                        </div>
                        <label class="col-md-2" id="modelselect" style="color:red" onclick="changemodel()">地图模式(点击切换网站首页模式)</label>
                        <textarea style="width:100px;height:20px"  hidden="hidden"  name="selecttype" id="selecttype" value="$!{selecttype}" >$!{selecttype}</textarea>
                        <div  id="mapmodel">
                            <label class="col-md-2">&nbsp;&nbsp;平台 :</label>
                            <div class="col-md-2">
                                <input type="radio" name="type" value="pc" #if($!{type}=='pc') checked #end  />
                                PC端
            &nbsp;&nbsp;&nbsp;
                                <input type="radio" name="type" value="m" #if($!{type}=='m') checked #end />
                                M端
                &nbsp;&nbsp;&nbsp;
                                <input type="radio" name="type" value="app" #if($!{type}=='app') checked #end />
                                APP端
                    &nbsp;&nbsp;&nbsp;
                                <input type="radio" name="type" value="all" #if($!{type}=='all') checked #end />
                                总pv
                            </div>
                        </div>
                           
                        <!--hidden="hidden" -->
                        <div hidden="hidden" id="internetmodel">
                            <label class="col-md-2">&nbsp;&nbsp;平台 :</label>
                            <div class="col-md-2">
                                <input type="radio" name="type1" value="pc" #if($!{type1}=='pc') checked #end  />
                                PC端
            &nbsp;&nbsp;&nbsp;
                                <input type="radio" name="type1" value="m" #if($!{type1}=='m') checked #end />
                                M端
                            </div> 

                            
                            
                            <div #if($!{type1} !='pc') hidden="hidden" #end id="stat_type_div" class="col-md-2">    
                            <label class="col-md-2">类型: &nbsp;&nbsp;</label>                         
                                <input type="radio" name="stat_type" value="day" #if($!{stat_type}=='day') checked #end  />
                                当日&nbsp;&nbsp;&nbsp;
                                <input type="radio" name="stat_type" value="month" #if($!{stat_type}=='month') checked #end />
                                当月
                            </div>
                            
                            <label class="col-md-2">&nbsp;&nbsp;城市:</label>
                            <div class="col-md-2">
                                <input type="hidden" id="initalcity" value="$!filecity" />
                                <select  id="filecity" name="filecity" value="$!{filecity}" style="width:130px;height:25px">
                                    #foreach( $city in $cityList)
                                    <option value="$!{city}"  #if($city == $!{filecity}) selected #end>$!{city}</option>
                                    #end
                                </select>
                            </div>
                            <div #if($!{type1} !='m') hidden="hidden" #end id='downloadElem' class="col-md-2">
                                <input type="button" class="button" id="downloadBtn" value="数据导出" />
                            </div>
                        </div>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="submit" class="button" id="searchBtn" value="查询" />
                    </div>
                </br>
                <textarea style="width:280px;height:60px"  hidden="hidden"  name="procitypv" id="procitypv" value="$!{procitypv}" >$!{procitypv}</textarea>
                <textarea style="width:100px;height:20px"  hidden="hidden"  name="typename" id="typename" value="$!{typename}" >$!{type}</textarea>
            </div>
            <!-- /.portlet-content--> </div>
        <!-- /.portlet--> </form>
    <form name="mapform" action="/heatmap/getPage" class="form-horizontal" role="form" method="post" target="_blank">
        <textarea style="width:100px;height:20px"  hidden="hidden"  name="selectedcityname" id="selectedcityname" value="$!{selectedcityname}" >$!{selectedcityname}</textarea>
        <textarea style="width:100px;height:20px"  hidden="hidden"  name="selectdate" id="selectdate" value="$!{selectdate}" >$!{selectdate}</textarea>
        <textarea style="width:100px;height:20px"  hidden="hidden"  name="selectpvtype" id="selectpvtype" value="$!{selectpvtype}" >$!{selectpvtype}</textarea>
    </form>
</div>
</div>
<div id="test" style="height:100%;width:100%;">
<!---->
<button class="col-md-2" id="returnall" style="z-index:99;position:relative;left:85%;top:60%; color: #ffffff; background-color: #e5412d; border-color: #dd301b;" >返回全国</button>
<div id="main" style="background-color:white;height:100%;width:100%;margin:0 auto;margin:0 auto;" ></div>

</div>
<script type="text/javascript">
    // Step为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
    require.config({
            paths:{ 
            'echarts':'/javascript/theme/libs/echarts/js/echarts',
            'echarts/chart/map' : '/javascript/theme/libs/echarts/js/chart/map'
            }
    });
    // Step 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
    require(
                [
                'echarts',
                'echarts/chart/map'
                ],function(ec){
                        var ecConfig = require('echarts/config');
                        var zrEvent = require('zrender/tool/event');
                        var curIndx = 0;
                        var selectedcityname='';
                        var mapType = [
                            'china',
                            // 23个省
                            '广东', '青海', '四川', '海南省', '陕西', 
                            '甘肃', '云南', '湖南', '湖北', '黑龙江',
                            '贵州', '山东', '江西', '河南', '河北',
                            '山西', '安徽', '福建', '浙江', '江苏', 
                            '吉林省', '辽宁', '台湾',
                            // 5个自治区
                            '新疆', '广西', '宁夏', '内蒙古', '西藏', 
                            // 4个直辖
                            '北京', '天津', '上海', '重庆',
                            // 2个特别行政区
                            '香港', '澳门'
                            ];
                            var pv=$("#procitypv").val();
                            var type=$("#typename").val();
                            var date=$("#startdate").val();
                            var strs=new Array();
                            var mapdata=[];                         
                            strs=pv.split(",");
                            var myChart = ec.init(document.getElementById('main'));// 加载 这个 地图
                                myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
                                var len = mapType.length;
                                var mt = mapType[curIndx % len];
                                if (mt == 'china') {
                                        // 全国选择时指定到选中的省份
                                        var selected = param.selected;
                                        for (var i in selected) {
                                                if (selected[i]) {
                                                        mt = i;
                                                        while (len--) {
                                                                if (mapType[len] == mt) {
                                                                curIndx = len;
                                                                }
                                                        }
                                                break;
                                        }
                                }
                               
                                }
                                else {//点击进入网站热力图
                                        var selected = param.selected;
                                        for (var p in selected) {
                                                if (selected[p]) {
                                                selectedcityname = p ;
                                                }
                                          }
                                        document.getElementById('selectedcityname').value = selectedcityname;
                                        document.getElementById('selectdate').value = date;
                                        mapform.submit();
                                }
                               
                                
                                if(mt=='重庆'||mt=='北京'||mt=='上海'||mt=='天津')
                                {
                                        document.getElementById('selectedcityname').value = mt;
                                        document.getElementById('selectdate').value = date;
                                        mapform.submit();
                                        mt='china';
                                        curIndx = 0;
                                }
                                option.series[0].mapType = mt;
                                if(mt=='china')
                                   {
                                       option.title.text = '全国pv热力图';
                                       document.getElementById('returnall').hidden=true;
                                    }
                                else
                                    {
                                       option.title.text = mt+'pv热力图';
                                       document.getElementById('returnall').hidden=false;
                                    }
                                 myChart.setOption(option, true);
                                 window.onresize = myChart.resize;
                                });
                                var button=document.getElementById('returnall');
                                  button.onclick=function(){
                                                    option.series[0].mapType = 'china';
                                                    curIndx = 0;
                                                    option.title.text = '全国pv热力图';
                                                    document.getElementById('returnall').hidden=true;
                                                    myChart.setOption(option, true);
                                                    window.onresize = myChart.resize;
                                  }
                               option = {
                                        title: {
                                                x:'center',
                                                text : '全国pv热力图',
                                                subtext : '（点击省市进入相应热力图）'
                                        },
                                        tooltip : {
                                                trigger: 'item'
                                        },
                                        itemStyle:{
                                                normal:{label:{show:true}},
                                                emphasis:{label:{show:true}}
                                        },  
                                        dataRange: {
                                                min: 0,
                                                max: 10000000,
                                                //color:['orange','yellow'],
                                                text:['高','低'],           // 文本，默认为数值文本
                                                calculable : true
                                        },
                                        toolbox: {
                                            show: true,
                                            orient : 'vertical',
                                            x: 'right',
                                            y: 'center',
                                            feature : {                                                  
                                                    saveAsImage : {show: true}
                                            }
                                        },
                                        series : [
                                            {
                                                name: type+'_pv',
                                                type: 'map',
                                                mapType: 'china',
                                                selectedMode : 'single',
                                                itemStyle:{
                                                        normal:{label:{show:true}},
                                                        emphasis:{label:{show:true}}
                                                },
                                                data:mapdata[0]
                                                }
                                        ]
                                    
                                }; 
                                
                                    for (i=0;i<strs.length/2 ;i++ ) 
                                        { 
                                          mapdata.push({
                                          name:strs[2*i],
                                          value: parseInt(strs[2*i+1])
                                          });
                                        } 
                                    option.series[0].data=mapdata;
                                    option.series[0].mapType = 'china'; 
                                    document.getElementById('returnall').hidden=true;
                                    myChart.setOption(option, true);
                                    window.onresize = myChart.resize;
                                    }
                                    );
        function changemodel(){
                     if(document.getElementById('internetmodel').hidden==false)
                       {
                           document.getElementById('selecttype').value="map";
                           document.getElementById('mapmodel').hidden=false;
                           document.getElementById('internetmodel').hidden=true;
                           document.getElementById('selectform').target="_self";
                           document.getElementById('modelselect').innerText="地图模式(点击切换网站首页模式)";
                       }
                     else
                        {
                           document.getElementById('selecttype').value="internet";
                           document.getElementById('mapmodel').hidden=true;
                           document.getElementById('internetmodel').hidden=false;
                           document.getElementById('selectform').target="_blank";
                            document.getElementById('modelselect').innerText="网站首页模式(点击切换地图模式)";
                       }
        
        }
        $(function(){
               $("#filecity").combobox({
                    selectOnNavigation: true,
                    onSelect: function(newVal,oldVal){
                        var city = $("#filecity").combobox('getValue');
                        
                    }
               });
               $("#filecity").combobox('setValue',$('#initalcity').val());
         });

    $(function() {

        $("#searchBtn").click(function(){
            $('#selectform').attr('action','/heatmap/getMapPage');
            $('#selectform').submit();
        });
        $("#downloadBtn").click(function(){
            $('#selectform').attr('action','/heatmap/downloadData');
            $('#selectform').submit();
        });

        //仅当选择m时，有数据导出功能
        $(':radio[name="type1"]').click(function(){
            if($(this).attr('value') == 'm'){
                $('#downloadElem').show();
                 $('#stat_type_div').hide();
            }else{                
                $('#stat_type_div').show();
                $('#downloadElem').hide();
            }
        });
    });         
        
</script></body>
</html>